<template>
  <div>
    <h3>Promise是ES6中重要且好用的特性</h3>
    <h3>Promise是异步编程的一种解决方案，常见于网络请求，解决回调地狱的问题，链式编程</h3>
    <h3>Promise的三种状态（1.pending：等待状态 2.fulfill：满足状态 3.reject：拒绝状态）</h3>
    <h3>网络请求的三种状态（1.pending：等待状态 2.success：成功状态 3.fail：失败状态）</h3>
    <h3>sync同步，async异步</h3>
  </div>

</template>
<script>

export default{
  data(){
    return{
      // isResult1 : false,
      // isResult2 : false
    }
  },
  created(){
    // Promise 有两个参数 resolve,reject ，resolve,reject本身又是函数
    // 例一：回调地狱
    // new Promise((resolve,reject) => {
    //   setTimeout(() => {
    //     console.log('Hello World');
    //     console.log('Hello World');
    //     console.log('Hello World');
    //     setTimeout(() => {
    //       console.log('Hello JavaScript');
    //       console.log('Hello JavaScript');
    //       console.log('Hello JavaScript');
    //       setTimeout(() => {
    //         console.log('Hello Vue.js');
    //         console.log('Hello Vue.js');
    //         console.log('Hello Vue.js');
    //       }, 1000);
    //     }, 1000);
    //   }, 1000);
    // })

    // 例二：解决回调地狱,链式编程
    new Promise(resolve => {
      resolve()// 调用resolve()会到.then(()=>{})
    }).then(() => {
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      return new Promise(resolve => {
        resolve()
      }).then(() => {
        console.log('Hello JavaScript');
        console.log('Hello JavaScript');
        console.log('Hello JavaScript');
        return new Promise(resolve => {
          resolve()
        }).then(() => {
          console.log('Hello Vue.js');
          console.log('Hello Vue.js');
          console.log('Hello Vue.js');
          return new Promise(reject => {
            reject()
          }).catch(() => {
            console.log('err message');
          })
        })
      })
    })
  },
  mounted(){
    // Promise的all方法：
    // Promise.all()接收一个数组参数，是多个网络请求
    Promise.all([
      // 请求1
      new Promise(resolve => {
        setTimeout(() => {
          resolve('result1');
        }, 2000);
      }),
      // 请求2
      new Promise(resolve => {
        setTimeout(() => {
          resolve('result2');
        }, 1000);
      }),
      // 两个请求返回的参数 result 是一个数组对应上方网络请求的顺序
    ]).then(result => {
      console.log(result[0]);
      console.log(result[1]);
    })
  },
  methods:{
    // 之前写法
    // 请求一：
    // ajax1(){
    //   $ajax({
    //     url:'',
    //     success:function(){
    //       console.log('结果1');
    //       this.isResult1 = true
    //       handleResult()
    //     }
    //   })
    // },
    // ajax2(){
    //   $ajax({
    //     url:'',
    //     success:function(){
    //       console.log('结果2');
    //       this.isResult2 = true
    //       handleResult()
    //     }
    //   })
    // },
    // handleResult(){
    //   if(this.isResult1 && this.isResult2){
    //     console.log('拿到两个网络请求的结果去处理')
    //   }
    // }
  }
}
</script>
<style lang="scss" scoped>
h3{
  margin: 15px 0 15px 0;
}
</style>
